<!--
 * @Author: your name
 * @Date: 2020-11-17 11:12:52
 * @LastEditTime: 2021-01-15 14:29:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vue-next/Users/duodian/Documents/qugame/work-admin/src/views/equip/list.vue
-->
<template>
  <div class="main">
    <h2 class="title">
      第一步：填写订单信息
      <div  v-if="$route.params.id">
        <el-button type="primary" icon="el-icon-edit-outline
" plain size="mini" @click="disabled = false" v-show="disabled">修改</el-button>
        <el-button type="primary" icon="el-icon-document-checked" plain size="mini" @click="disabled = true" v-show="!disabled">取消</el-button>
        <el-button type="primary" icon="el-icon-document-checked" plain size="mini" @click="onEditSubmit();disabled = true" v-show="!disabled">保存</el-button>
      </div>

    </h2>
    <div class="order">
      <el-form :rules="rules" :model="info" label-position="left" class="demo-form-inline" label-width="130px">
        <el-form-item label="渠道">
          <el-select v-model="info.platformType" placeholder="请选择" :disabled="disabled">
            <el-option
              v-for="item in channels"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道订单编号" prop="thirdOrderNo">
          <el-input

            clearable
            v-model="info.thirdOrderNo"
            placeholder="请填入渠道订单编号"
            :disabled="disabled"
          >
            <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
          </el-input>

        </el-form-item>
        <el-form-item label="下单时间" prop="thirdOrderTime">
          <el-input
            clearable
            v-model="info.thirdOrderTime"
            placeholder="请填入下单时间"
            :disabled="disabled || $route.params.id"
          ></el-input>
        </el-form-item>
        <el-form-item label="时长（小时）" prop="hour">
          <el-input
            type="number"
            v-model="info.hour"
            placeholder="请填入时长（小时）"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="支付金额（元）" prop="paymentPrice">
          <el-input
            type="number"
            v-model="info.paymentPrice"
            placeholder="请填入支付金额（元）"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名">
          <el-input
            clearable
            v-model="info.receiveUserName"
            placeholder="请填入收货人姓名"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人电话">
          <el-input
            clearable
            v-model="info.receiveUserPhone"
            placeholder="请填入收货人电话"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人地址">
          <el-input
            clearable
            v-model="info.receiveAddress"
            placeholder="请填入收货人地址"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input
            clearable
            v-model="info.spec"
            placeholder="请填入规格"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- <el-form :model="info" class="demo-form-inline" label-width="100px">
        <el-form-item label="快捷填入">
          <el-input type="textarea" v-model="info.desc" :autosize="{ minRows: 5, maxRows: 10}"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" >提取信息</el-button>
        </el-form-item>
      </el-form> -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'OrderInfo',
  props: {
    info: {
      type: Object,
      default: function () {
        return {}
      }
    },
    onEditSubmit: Function
  },
  data () {
    return {
      channels: [
        {
          label: '拼多多',
          value: 0
        }
      ],
      disabled: false,
      rules: {
        thirdOrderNo: [
          { required: true, message: '请填入渠道订单编号', trigger: 'blur' }
        ],
        thirdOrderTime: [
          { required: true, message: '请填入下单时间', trigger: 'blur' }
        ],
        hour: [
          { required: true, message: '请填入时长（小时）', trigger: 'blur' }
        ],
        spec: [
          { required: true, message: '请填入规格', trigger: 'blur' }
        ],
        paymentPrice: [
          { required: true, message: '请填入支付金额（元）', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    if (this.$route.params.id) {
      this.disabled = true
    }
  }
}
</script>
<style lang="scss" scoped>
.main{
  background: #f5f5f5;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 15px;
  .title{
    font-size: 23px;
    font-weight: 400;
    line-height: 46px;
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .order{
    display: flex;
    > form{
      flex: 1;
      &:first-child{
        flex: 0 0 500px;
      }
    }
  }
}
</style>
